<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <span v-for="r in roleList">
        <input type="checkbox"
               :value="r.rid"
               name="roleIds"
               v-model="userRoleIds"/> {{r.rname}}
    </span>

    <br>
    <input type="button" @click="updateUserRole" value="保存"/>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            roleList:[
                {rid:1,rname:'普通用户'},
                {rid:2,rname:'管理员'},
                {rid:3,rname:'财务经理'},
                {rid:4,rname:'技术总监'}
            ],
            userRoleIds:[1,4]
        },
        methods:{
            updateUserRole(){
                console.log(this.userRoleIds);
            }
        }
    });
</script>
</body>
</html>